<template>
    <div class="home">
        <div class="header">
            <div class="content">
                <div class="left">
                    <div class="logo" @click="toIndex">
                        <img src="../../assets/logo.png" alt="">
                    </div>
                    <ul class="el-menu" >
                        <li v-for="(item,index) in menuList" :key="index" @mouseenter="isEnter(item)" @click="toUrl(item)">
                            {{item.name}}
                            <span class="line"></span>
                        </li>
                    
                    </ul>
                </div>
                <div class="right">
                    <div class="search">
                        <span class="search-icon iconfont iconsousuo" @click="searchProduct"></span>
                        <input type="text" class="search-input" v-model="search" placeholder="搜索商品">
                    </div>
                    <span class="iconfont iconyonghu" @click="$navTo('/login')"></span>
                    <span class="iconfont iconlike1"></span>
                    
                    <span class="iconfont icongouwuche" @click="$navTo('/home/shoppingCart')"></span>
                    
                </div>
            </div>
        </div>
         <draw :show="show" :active="active" @isLeave="isLeave" />
        <div class="content">
            <div class="home-body">
                <router-view></router-view>
            </div>
        </div>
       <Footers />
    </div>
</template>
<script>
import draw from "./components/draw.vue";
import Footers from "./components/footer.vue"
export default{
    components:{
        draw,
        Footers
    },
    data(){
        return{
            active:0,
            show:false,
            menuList:[
                {
                    index:1,name:"模块展示"
                },
                {
                    index:2,name:"案例展示"
                },
                {
                    index:4,name:"我们的服务"
                },
                {
                    index:5,name:"关于我们"
                },
            ],
            search:''
        }
    },
    methods: {
        searchProduct(){
          var keyword = this.search
            if(!keyword){
                this.$message({message:'请输入商品关键字',type:"error"})
                return false
            }
            this.$navTo('/home/searchProduct?keyword='+keyword)
        },
        isEnter(item){
            if(item.index !=5){
                this.active = item.index;
                this.show = true;
            }else{
                this.show = false;
            }
        },
        toUrl(item){
            if(item.index ==5){
                this.$navTo("/home/aboutUs")
            }
        },
        toIndex(){
            this.$navTo('/home/index');
            this.show=false
        },
        isLeave(bool){
            this.show = bool;
        }
    },
}
</script>
<style lang="scss">
.home{
     .header{
            padding: 10px 0;
            z-index: 1999;
            position: fixed;
            top: 0;
            left: 50%;
            width: 100%;
            transform: translateX(-50%);
            
            background: #fff;
            .content{
                display: flex;
                justify-content: space-between;
            }
            .left{
                display: flex;
                .logo{
                    width: auto;
                    height: 36px;
                    cursor: pointer;
                    // background: #eee;
                    margin-right: 20px;
                    img{
                        height: 100%;
                        width: auto;
                    }
                }
                .el-menu{
                    display: flex;
                    border: none;
                    li{
                        height: 36px;
                        line-height: 36px;
                        padding: 0 5px;
                        margin-left: 25px;
                        font-size: 14px;
                        color: #111;
                        cursor: pointer;
                        position: relative;
                        &:hover{
                            .line{
                                width: 100%;
                            }
                        }
                        .line{
                            height: 3px;
                            background: #0058a3;
                            position: absolute;
                            bottom: 0;
                            width: 0;
                            left: 50%;
                            transition: all 0.4s;
                            transform: translateX(-50%);
                        }
                    }
                }
            }
            .right{
                display: flex;
                align-items: center;
                .search{
                    width: 150px;
                    position: relative;
                    .search-icon{
                        position: absolute;
                        left: 10px;
                        margin-left: 0;
                        top: 50%;
                        transform: translateY(-50%);
                        font-size: 14px;
                        cursor: pointer;
                    }
                    .search-input{
                        outline: none;
                        width: 100%;
                        padding-left: 25px;
                        height: 30px;
                        border-radius: 15px;
                        text-align: center;
                        border: 1px solid #888;
                    }
                }
                .iconfont{
                    margin-left: 25px;
                    font-size: 24px;
                    cursor: pointer;
                }
            }
        }
    .content{
        max-width: 1200px;
        margin: 0 auto;
       
        .home-body{
            padding-top: 60px;
        }
       
    }
     
}
</style>